<template>
  <div style="padding:0 17px;">
    <Breadcrumb/>
    <el-form :model="ruleForm" ref="ruleForm" label-width="120px" label-position="right" class="demo-ruleForm"
    style="margin-left: 80px;margin-top: 30px">
      <el-form-item label="提示" style="width: 40%">
        如果密码是初始密码123456，请修改密码后重新登录
      </el-form-item>
      <el-form-item label="原密码" prop="password" style="width: 40%">
        <el-input v-model="ruleForm.password" class="input-size" placeholder="原密码"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPass" style="width: 40%">
        <el-input v-model="ruleForm.newPass" class="input-size" placeholder="新密码"></el-input>
      </el-form-item>
      <el-form-item label="确认新密码" prop="newPass1" style="width: 40%">
        <el-input v-model="newPass1" class="input-size" placeholder="确认新密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button style="font-size: 12px" type="primary" @click="save('ruleForm')">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Breadcrumb from "@/components/Breadcrumb.vue";
import request from "@/utils/request";
export default {
  name: "ChangePassword",
  components: {Breadcrumb},
  data() {
    return{
      newPass1:'',
      ruleForm:{}
    }
  },
  methods: {
    save(val){
      if(this.ruleForm.newPass === this.newPass1){
        this.ruleForm.userId = JSON.parse(localStorage.getItem("user")).id
        this.$refs[val].validate((valid) => {
          if (valid) {
            request.post("/user/password", this.ruleForm).then(res => {
              if (res.code === '200') {
                this.$message({
                  message: "成功",
                  type: "success"
                })
                this.$router.push({path: "/login"});
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        })
      } else {
        this.$message.error("两次输入的新密码不一致")
      }
    }
  }
}
</script>

<style scoped>
:deep(.el-form-item__label) {
  font-size: 14px;
  font-weight: 700
}
.input-size {
  font-size: 13px;
}
</style>
